<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue/vuejs-2.5.16.js"></script>
				<script type="text/javascript" src="js/element/index.js"></script>
				<link rel="stylesheet" type="text/css" href="js/element/index.css"/>
				<script type="text/javascript" src="js/axios/axios-0.18.0.js"></script>
				<style>
				
				  .el-table .warning-row {
				    background: oldlace;
				  }
				
				  .el-table .success-row {
				    background: #f0f9eb;
				  }
				</style>
				
	</head>
	
	<body>
		<div id="app">
			<!-- <button type="button" @click="huoqu()">获取数据</button> -->
			<el-form :inline="true" :model="userCound" class="demo-form-inline">
			  <el-form-item label="姓名">
			    <el-input v-model="userCound.username" placeholder="请输入姓名"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="城市">
			    <el-select v-model="userCound.city" placeholder="选择城市">
					 <el-option label="请选择" value=""></el-option>
			      <el-option label="石家庄" value="shijiazhuang"></el-option>
			      <el-option label="上海" value="shanghai"></el-option>
				  <el-option label="纽约" value="newYork"></el-option>
				  <el-option label="北京" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  
			   <el-form-item label="性别" >
			      <el-radio-group v-model="userCound.gender">
			        <el-radio label="nan" >男</el-radio>
			        <el-radio label="nv" >女</el-radio>
					 <el-radio label="" >男女都查</el-radio>
			      </el-radio-group>
			    </el-form-item>
				
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="success" @click="chongzhi">重置</el-button>
				<el-button type="warning" @click="showDialog">添加用户</el-button>
				 <el-button type="danger"  @click="delBath">批量删除</el-button>
			  </el-form-item>
			</el-form>
			<hr/>
			
			  <el-table :data="users" style="width: 100%" :row-class-name="tableRowClassName"
			  stripe @selection-change="handleSelectionChange" ref="multipleTable">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" type="index" :index="xuhao" width="80"> </el-table-column>
			    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
			    <el-table-column prop="gender"label="性别" width="180"></el-table-column>
			    <el-table-column prop="city"label="城市" width="180"></el-table-column>
				<el-table-column prop="hobby"label="爱好" width="180"></el-table-column>
				<el-table-column prop="introduce"label="介绍" ></el-table-column>
				<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row)"  type="primary" icon="el-icon-edit" circle></el-button>
					<el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
				</template>
				</el-table-column>
			  </el-table>
			  
			   <el-pagination
			        @size-change="handleSizeChange"
			        @current-change="handleCurrentChange"
			        :current-page="page"
			        :page-sizes="[2, 5, 10, 15]"
			        :page-size="size"
			        layout="total, sizes, prev, pager, next, jumper"
			        :total="total">
			      </el-pagination>
				  <!-- 添加-->
				  <el-dialog :title="user.id==null ? '添加用户':'修改用户'" :visible.sync="dialogFormVisible">
				      <el-form :model="user" label-width="80px">
				        <el-form-item label="姓名">
				          <el-input v-model="user.username"></el-input>
				        </el-form-item>
						
						<el-form-item label="性别">
						  <el-radio-group v-model="user.gender">
						    <el-radio label="nan">男</el-radio>
						    <el-radio label="nv">女</el-radio>
						  </el-radio-group>
						</el-form-item>
						
						<el-form-item label="爱好">
						  <el-checkbox-group v-model="user.hobby">
						    <el-checkbox label="basketball">篮球</el-checkbox>
						    <el-checkbox label="music">音乐</el-checkbox>
						    <el-checkbox label="dance">跳舞</el-checkbox>
						    <el-checkbox label="football">足球</el-checkbox>
						  </el-checkbox-group>
						</el-form-item>
						
						
				        <el-form-item label="城市">
				          <el-select v-model="user.city" placeholder="请选择城市">
				            <el-option label="石家庄" value="shijiazhuang"></el-option>
				            <el-option label="北京" value="beijing"></el-option>
							<el-option label="上海" value="shanghai"></el-option>
							<el-option label="纽约" value="newYork"></el-option>
				          </el-select>
				        </el-form-item>
						
						
						<el-form-item label="介绍">
						  <el-input type="textarea" v-model="user.introduce"></el-input>
						</el-form-item>
						
				       
				     
				        <el-form-item>
				          <el-button type="primary" @click="addUser">{{user.id==null ? '添加':'修改'}}</el-button>
				          <el-button v-show="user.id==null" @click="chongzhiAdd">重置</el-button>
				        </el-form-item>
				      </el-form>
				  </el-dialog>
		</div>
	</body>

	<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					users: [],
					page:1,
					size:10,
					total:0,
					dialogFormVisible:false,
					userCound:{},
					user:{
						hobby:[]
					},
					ids:[]
				},
				created(){
					this.huoqu();
				},
				methods:{
					 tableRowClassName({
						 row, rowIndex
						 }) {
					        if (rowIndex === 1) {
					          return 'warning-row';
					        } else if (rowIndex === 3) {
					          return 'success-row';
					        }
					        return '';
					      },
				async	huoqu(){
						var {data} = await axios.post(`http://localhost:8089/spring03/user/findPageAndCount/${this.page}/${this.size}`,this.userCound);
						if(data.code == 2000){
							this.users = data.data.records;
							this.total = data.data.total;
						}
					},
					handleSizeChange(size){
						this.size = size;
						this.page =1;
						this.huoqu();
					},
					handleCurrentChange(current){
						this.page = current;
						this.huoqu();
					},
					onSubmit(){
						this.huoqu();
					},
					chongzhi(){
						this.userCound = {};
					},
					xuhao(index){
						return (this.page-1)*this.size+index+1;
					},
					showDialog(){
						this.chongzhiAdd();
						this.dialogFormVisible=true;
					},
				async	addUser(){
						var {data} = await axios.post(`http://localhost:8089/spring03/user/user`,this.user);
						this.dialogFormVisible=false;
						if(data.code == 2000){
							this.page=1;
							this.huoqu();
						}
					},
					 chongzhiAdd(){
						this.user={
					 		hobby:[]
					 	}
					 },
					  async handleEdit(b){
					 	this.showDialog();
					 	var {data} = await axios.get(`http://localhost:8089/spring03/user/${b.id}`);
					 	  if(data.code == 2000){
					 		 this.user = data.data;
					 	}
					 },
					   handleDelete(b){
					     this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					 		confirmButtonText: '确定',
					 		cancelButtonText: '取消',
					 		type: 'warning'
					 		}).then(() => {
					 		this.deleteUserById(b.id);
					 			})
					 		},
							
		           async	deleteUserById(id){
					 	var {data} = await axios.delete(`http://localhost:8089/spring03/user/id/${id}`);
							if(data.code==2000){
								this.huoqu();
							}
					 	},
						async	delBath(){
								if(this.ids.length==0){
										this.$message("您没有选择任何用户");
							 		}else{
									 var {data} = await axios.post(`http://localhost:8089/spring03/user/delBatch`,this.ids);	
									 if(data.code==2000){
										 this.huoqu();
									 }
									}
							 	},
						handleSelectionChange(){
								this.ids = [];
								var  arr = this.$refs.multipleTable.selection;
								for(var i = 0;i<arr.length;i++){
								    var user = arr[i];
								   this.ids.push(user.id);
								}
							 }
				}
			})
	
	
	</script>
	
</html>
